<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="240" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu :accordion="accordion" ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList" :open-names="openNames">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="collapsed" :src="dgutLogo" :alt="dgutLogoAlt" key="min-logo" style="margin-right: 0;"/>
          <img v-show="!collapsed" :src="dgutLogo" :alt="dgutLogoAlt" key="dgut-logo" :class="logoClass"/>
          <div v-show="!collapsed">
            <h2>实验室管理系统</h2>
            <span style="font-size: 12px; font-family:Segoe Print; color: #a7a7a7;">LAB MANAGEMENT</span>
          </div>
          <!-- <Button v-show="!collapsed" type="primary" shape="circle">DGUT - LACS</Button> -->
          <!-- <img v-show="collapsed" :src="maxLogo" key="max-logo" /> -->
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-avator="userAvator"/>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
          </div>
          <Content class="content-wrapper">
            <keep-alive :include="cacheList" :exclude="notCacheName[0] !== '' ? notCacheName : refreshName">
              <router-view v-if="!refresh"/>
            </keep-alive>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import Fullscreen from './components/fullscreen'
import { mapActions, mapMutations } from 'vuex'
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
import dgutLogo from '@/assets/images/logo/dgut-logo.png'
// import maxLogo from '@/assets/images/logo.png'
import './main.less'

export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    TagsNav,
    Fullscreen,
    User
  },
  data () {
    return {
      collapsed: false,
      accordion: false,
      dgutLogo,
      dgutLogoAlt: '东莞理工学院Logo',
      // maxLogo,
      isFullscreen: false,
      openNames: []
    }
  },
  computed: {
    logoClass () {
      return [this.collapsed ? 'collapsed-logo' : '']
    },
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvator () {
      return this.$store.state.user.avatorImgPath
    },
    cacheList () {
      return ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
    },
    notCacheName () {
      return this.$route.meta && this.$route.meta.notCache ? ['ParentView', this.$route.name] : ['']
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
    refreshName () {
      return this.$store.state.app.refreshName ? ['ParentView', this.$store.state.app.refreshName] : ['']
    },
    refresh () {
      return this.$store.state.app.refresh
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setRefreshName',
      'setRefresh'
    ]),
    ...mapActions([
      'handleLogin'
    ]),
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      if (type === 'all') {
        this.turnToPage('home')
      } else if (routeEqual(this.$route, route)) {
        if (type === 'others') {
        } else {
          const nextRoute = getNextRoute(this.tagNavList, route)
          this.$router.push(nextRoute)
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    // 初始状态，侧边栏默认展开的菜单项
    getOpenNames (list) {
      let res = []
      list.forEach(item => {
        if (item.children && (item.children.length > 1 || (item.meta && item.meta.showAlways))) {
          res.push(item.name)
          res = res.concat(this.getOpenNames(item.children))
        }
      })
      return res
    }
  },
  watch: {
    '$route' (newRoute) {
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      this.$refs.sideMenu.updateOpenName(newRoute.name)
    },
    refresh (value) {
      if (value) {
        this.$nextTick(() => {
          this.setRefreshName('')
          this.setRefresh(false)
        })
      }
    }
  },
  created () {
    this.openNames = this.getOpenNames(this.$store.getters.menuList)
  },
  mounted () {
    /**
       * @description 初始化设置面包屑导航和标签导航
       */
    this.setTagNavList()
    this.addTag({
      route: this.$store.state.app.homeRoute
    })
    this.setBreadCrumb(this.$route)
  }
}
</script>
